import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, InputNumber, TreeSelect,Switch,Select } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const Option = Select.Option;

class TRoomModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
    if (e) e.stopPropagation();
    this.props.form.resetFields();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const { children, dataCenterList, title,currentDatacenterId } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { name, contactsPhone, code,contacts,datacenterId_ } = this.props.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
   

    const getBrand = data => data.map((item) => {
    return <Option key={item.id_+''}>{item.name}</Option>
  })

    return (
        <span>
            <span onClick={this.showModelHandler}>
                { children }
            </span>
            <Modal
                confirmLoading={false}
                title={title}
                visible={this.state.visible}
                onOk={this.okHandler}
                onCancel={this.hideModelHandler}
            >
              <Form layout='horizontal' onSubmit={this.okHandler}>
              {getFieldDecorator('type', { initialValue: 1 })(
                        <Input type="hidden" />
                 )}
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="机房名称"
                >
                  {
                    getFieldDecorator('name', {
                      initialValue: name,
                      rules: [
                        { required: true, whitespace: true, message: '请输入机房名称'},
                        { max: 50, message: '机房名称不能超过50个字' },
                        ]
                    })(<Input />)
                  }
                </FormItem>
                 <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="机房编号"
                >
                  {
                    getFieldDecorator('code', {
                      initialValue: code,
                      rules: [
                        { required: true, whitespace: true, message: '请输入机房编码'},
                        { max: 20, message: '机房编码不能超过20个字' },
                        ]
                    })(<Input />)
                  }
                </FormItem>
                <FormItem
                  label="数据中心"
                  hasFeedback
                  {...formItemLayout}
                >
                  {getFieldDecorator('datacenterId', {
                     initialValue: datacenterId_ == null ? currentDatacenterId : datacenterId_ + '',
                    rules: [
                      { required: true, message: '请选择数据中心' },
                    ],
                  })(
                    <Select showSearch>
                      {getBrand(dataCenterList)}
                    </Select>
                  )}
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="联系人"
                >
                  {
                    getFieldDecorator('contacts', {
                      initialValue: contacts,
                      rules: [
                        {required: true, whitespace: true, message: '请输入联系人'},
                        { max: 20, message: '联系人不能超过20个字' },
                      ]
                    })(<Input />)
                  }
                  
                </FormItem>

                <FormItem
                  {...formItemLayout}
                  hasFeedback
                  label="联系方式"
                >               
                  {
                    getFieldDecorator('contactsPhone', {
                      initialValue: contactsPhone,
                      rules: [
                      { required: true, message: '请输入联系方式',},
                      { max: 20, message: '联系方式长度不能超过20个字' },
                      ],
                    })(<Input />)
                  }
                  </FormItem>
               
              </Form>
            </Modal> 
        </span>
    );
  }
}

export default Form.create()(TRoomModal);